<template>
    <UContainer class="mx-auto max-w-[1024px]">
        <ContentRenderer
            v-if="page"
            :value="page"
            :prose="false"
        />
    </UContainer>
</template>

<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryCollection('landing').path('/').first())
if (!page.value) {
    throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}

const title = page.value.seo?.title || page.value.title
const description = page.value.seo?.description || page.value.description

useSeoMeta({
    titleTemplate: '',
    title,
    ogTitle: title,
    description,
    ogDescription: description,
    ogImage: 'images/social-image.jpg',
    twitterImage: 'images/social-image.jpg'
})
</script>
